<template>
    <div class="app-container">
        <div class="project-manage">
            <div class='main-top'>
                <el-form   label-width="70px" :inline="true" :model="searchInfo" class="form-style">
                    <el-form-item label="车辆号码:">
                        <el-input v-model= searchInfo.carNumber  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="组织名称:">
                        <el-input v-model= searchInfo.orgName  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="路线编号:">
                        <el-input v-model= searchInfo.lineNum  placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item  label="路线名称:">
                      <el-input  v-model= searchInfo.lineName placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="search()"  type="primary">搜索</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="reSet()" type="primary">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-nav">
                <div><el-button>数据同步</el-button></div>
            </div>
            <div class="main-table">
                <el-table v-loading="tableLoading" stripe  :data="tableList" height="500" border style="width: 100%">
                    <el-table-column align="center" prop="licensePlate" label="车牌号码" > </el-table-column>
                    <el-table-column align="center" prop="organizationName" label="组织名称" > </el-table-column>
                    <el-table-column align="center" prop="lineNumber" label="线路编号" > </el-table-column>
                    <el-table-column align="center" prop="lineName" label="线路名称" > </el-table-column>
                    <el-table-column  label="操作" width="150">
                        <template slot-scope="scope">
                        <el-button size="mini"  @click="getvehicleList(scope)">查看售货机列表</el-button>
                        </template>
                    </el-table-column>  
                </el-table>
				<div class="block">
					<el-pagination
					background
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="handleCurrentChange"    
					>
					</el-pagination>
				</div>   
            </div>
            
            <template name='车辆线路的售货机列表'>
                <el-dialog center title="车辆线路的售货机列表" :visible.sync="machineList">
					<!-- <div class="main-title">
						<span>车辆编号：沪AG1234</span>
						<span>线路编号：C1</span>
					</div> -->
                  	<div class="main-table">
                      	<el-table stripe  :data="machineInfo" height="380" border style="width: 100%">
							<el-table-column align="center" prop="pointName" label="位置名称" > </el-table-column>
							<el-table-column align="center" prop="number" label="售货机编号" > </el-table-column>
                      	</el-table>
                  	</div>
                </el-dialog>
            </template>
        </div>
    </div>
</template>
<script>
import {getCarList, getvehicleList, getCarInfo } from '@/api/baseInfo'
export default {
    data() {
        return {
			tableList:[],
            itemManage:false,
			machineList:false,
			searchInfo:{carNumber:'',orgName:'',lineNum:'',lineName:''},
			tableLoading:false,
            currentPage:1,
            totalPage:0,
            machineInfo:[]
        }
    },
    methods: {
      getCarList:function(current) {
      		this.tableLoading = true
			let params={
						"current": current || this.currentPage,
						"licensePlate": this.searchInfo.carNumber,
						"lineName": this.searchInfo.lineName,
						"lineNumber": this.searchInfo.lineNum,
						"organizationName": this.searchInfo.orgName,
						"size": 10
					}
			getCarList(params).then(res =>{
				console.log(res)
          		this.tableList = res.data.data.records
                this.totalPage = res.data.data.total
                this.tableLoading = false
			})
			},
			getvehicleList:function(data){
                this.machineList = true
                const {id} = data.row
				getvehicleList(id).then(res=>{
                    console.log('看数据和')
                    console.log(res)
                    this.machineInfo = res.data.data
                })
			},
			search(){
                this.currentPage = 1
				this.getCarList()
			},
			reSet() {
				this.searchInfo={carNumber:'',orgName:'',lineNum:'',lineName:''}
				this.getCarList()
			},
			handleCurrentChange(current) {
            this.getCarList(current)
        	}
		},
		created() {
			this.getCarList()
		}
  
}
</script>
<style rel="stylesheet/scss" lang="scss">
   @import "src/styles/mixin.scss";
    .project-manage{
        .main-top{
            padding: 32px 15px;
            padding-bottom: 20px;
            background-color: #FFF;
            .el-input{
                width: 150px ;
            }
            .el-button{
                padding: 11px 33px;
                margin-left: 5px;
            }
            .el-form-item{
                margin-right: 0px;
            }
        }
        .main-nav{
            @include navStyle
        }
        .addenp{
            .el-form-item{
            margin-bottom: 10px;
            }
            .el-dialog__body{
            padding: 30px 35px;
            padding-bottom: 0px;
            }
            .dialog-footer{
            padding:11px 50px 29px 0px;
            text-align: right;
            .el-button{
                padding: 10px 30px;
                border: none;
            }
            .cancel{
                color: #000;
                background: #E0E0E0;
                border-radius: 3px;
            }
            }
        }
		.main-title{
			margin-bottom: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			span{
				display: inline-block;
			}
		}
		.block{
            text-align: center;
            margin-top: 15px;
        }
    }
</style>
